<!--
 * @Description: 任务订单
 * @Author: lwx
 * @Date: 2022-11-24 13:15:41
 * @LastEditors: lwx
 * @LastEditTime: 2023-04-25 14:29:47
-->
<template>
<!-- 任务管理页面 -->
  <div class="fillcontain d-flex">
    <div class="container_left">
       <div class="left_box">
          <div class="left_header">
            <i class="el-icon-date ml-3 mr-2"></i>
            <span >订单列表</span>
          </div>
          <div class="left_body">
              <el-tree 
                ref="tree"
                :data="orderNOList" 
                node-key="order_no"
                :current-node-key="currentNodekey"
                :highlight-current="highlight"
                :props="defaultProps" 
                 default-expand-all
                @node-click="handleNodeClick">
              </el-tree>
          </div>
       </div>
    </div>
    <div class="container_right">
      <div class="searchArea">
        <el-form
          size="mini"
          :inline="true"
          ref="taskForm"
          :model="taskForm"
          :rules="taskForm_rules">
          <el-form-item prop="order_no" label="订单编号">
            <el-input v-model="taskForm.order_no" :validate-event="false"></el-input>
          </el-form-item>
          <el-form-item prop="work_no" label="任务编号">
            <el-input v-model="taskForm.work_no" :validate-event="false" clearable></el-input>
          </el-form-item>
          <el-form-item prop="name" label="任务名称">
            <el-input v-model="taskForm.name" :validate-event="false" clearable></el-input>
          </el-form-item>
          <el-form-item prop="product_no" label="产品编号">
            <el-select v-model="taskForm.product_no" placeholder="请选择">
              <el-option
                v-for="item in productList"
                :key="item.product_id"
                :label="item.product_no"
                :value="item.product_no">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电堆条码" clearable>
            <el-input v-model="taskForm.info" :validate-event="false"></el-input>
          </el-form-item>
          <el-form-item prop="amount" label="任务数量">
            <el-input-number v-model="taskForm.amount" :validate-event="false"></el-input-number>
          </el-form-item>
          <el-form-item  label="计划生产时间">
            <el-date-picker
              style="width:150px"
              v-model="taskForm.start"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button 
              type="success" 
              size="mini"
              @click="addTask('taskForm')">添加任务
            </el-button>
            <el-button 
              type="warning" 
              size="mini"
              @click="allTask()"
              >全部任务
            </el-button>
          </el-form-item>
        </el-form>
      </div>
     <!-- 任务表格 -->
      <div class="task_table">
      <el-table
        size="mini"
        border
        :data="taskList"
        style="width: 100%;"
        height="475px"
        align="center">
        <el-table-column
          prop="work_no"
          label="任务编号"
          align="center">
        </el-table-column>
        <el-table-column
          prop="product_no"
          label="产品编号"
          align="center">
        </el-table-column>
        <el-table-column
          prop="product_name"
          label="产品名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="process_code"
          label="工艺代号"
          align="center">
        </el-table-column>
        <el-table-column
          label="任务数量"
          align="center"
          width="135">
         <template slot-scope="scope">
           <el-input-number 
             :disabled="role.includes('操作员')" 
             v-model="scope.row.amount" 
             size="mini" 
             style="width:110px"
             @change="setProcessTask(scope.row)">
           </el-input-number>
         </template>
       </el-table-column>
       <el-table-column
         label="计划生产时间"
         align="center"
         width="155">
         <template slot-scope="scope">
           <el-date-picker
             :disabled="role.includes('操作员')" 
             style="width:130px"
             size="mini"
             v-model="scope.row.task_time"
             type="date"
             placeholder="选择日期"
             value-format="yyyy-MM-dd"
             @change="setProcessTask(scope.row)">
           </el-date-picker>
         </template>
       </el-table-column>
       <el-table-column
          prop="task_done"
          label="已完成数量"
          align="center">
        </el-table-column>
        <el-table-column
          label="任务状态"
          align="center">
          <template slot-scope="scope">
            <el-tag size="mini" :type="scope.row.task_status==='已完成'?'success':''">{{scope.row.task_status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button  
              :disabled="role.includes('操作员')" 
              type="warning" size="mini" 
              @click="deleteTaskByID(scope.row.tasks_id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/pagination";
import {orderNoList} from '@/api/order.js'
import {productList} from '@/api/product.js'
import {addTask,orderTask,removeTask,updateTask} from '@/api/task.js'
export default {
  components:{
  Pagination
  },
  data () {
    return {
      highlight:true,
       orderNOList: [
        {order_no:'单号',children:[{ order_id: '',
        order_no: ''}]}],
       defaultProps: {
          label: 'order_no',
        },
      currentNodekey:'',
      productList:[],
      taskList:[],
      taskForm:{
        order_no:'',
        product_no:'',
        work_no:'',
        name:'',
        amount:0,   
        start:null
      },
      taskForm_rules:{
        order_no: [
          {
            required: true,
            message: "请填写订单号",
            trigger: "change",
          },
        ],
          product_no: [
          {
            required: true,
            message: "请选择产品编号",
            trigger: "change",
          },
        ],
          work_no: [
          {
            required: true,
            message: "请填写任务编号",
            trigger: "blur",
          },
        ],
          name: [
          {
            required: true,
            message: "请填写任务名称",
            trigger: "blur",
          },
        ],
         amount: [
          {
            required: true,
            message: "请填写数量",
            trigger: "blur",
          },
        ],
      },
    }
  },
 created(){
   if(this.$route.query.order_no){
     const {query}=this.$route
     this.taskForm.order_no=query.order_no
     this.getOrderTask()//获取订单下任务
   }
    this.getOrderNOList()//获取订单编号列表
    this.getProductList()//获取产品列表
 },
 computed:{
  role(){
    return this.$store.getters.roles
  }
 },
 methods:{
  //获取订单编号列表
    async getOrderNOList(){
      const {data}= await orderNoList()
      this.orderNOList[0].children=data  
      this.$nextTick(()=>{
        this.currentNodekey=this.taskForm.order_no
        this.$refs.tree.setCurrentKey(this.currentNodekey)
      })
    },
    //获取产品列表
   async getProductList(){
      const res = await productList({is_page:0})
      this.productList=res.data
    },
   //添加任务
    addTask(taskForm){
       this.$refs[taskForm].validate((async valid=>{
         if(valid){
           await addTask(this.taskForm)
           this.getOrderTask()
          this.$message.success('添加任务成功，可以继续添加！') 
         }
      }))
     },  
    //获取订单任务
   async getOrderTask(){
     let params={
      order_no:this.taskForm.order_no,
     }
     const res= await orderTask(params)
     this.taskList=res.data
    },
    //删除任务
  async deleteTaskByID(tasks_id){
     this.$confirm("此操作将删除该任务, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
         await removeTask(tasks_id)
         this.$message.success('删除任务成功！')
         this.getOrderTask()
      })   
   },
   //全部任务
   async allTask(){
    this.taskForm.order_no=null
    this.highlight=false
    this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(null);
      });
    const res= await orderTask({task_status:'undone'})
     this.taskList=res.data
   },
   //点击节点
   handleNodeClick(data){
    this.taskForm.order_no=data.order_no
    this.highlight=true
     this.getOrderTask()//获取订单下任务
   },
  //设置排产
  async setProcessTask(row){
      let params={
        tasks_id:row.tasks_id,
        amount:row.amount,
        task_time:row.task_time
      }
      await updateTask(params)
      this.$message.success('修改成功！')
      this.getOrderTask()//刷新列表
   },
 }
}
</script>
<style lang='scss' scoped>
.container_left{
  flex: 1;
}
.container_right{
  flex: 6;
  background: #fff;
}
.left_box{
  height: 100%;
  margin-right: 10px;
  background: #fff;
  border-radius: 2px;
}
.left_header{
  width: 100%;
  height: 40px;
  background: #EEF2FE;
  font-size: 13px;
  font-weight: 600;
  color: #909399;
  line-height: 40px;
}
.left_body{
  margin:5px 10px;
}
.task_table{
  background:#fff;
  padding: 0 10px 15px
}
::v-deep.el-tree-node__content{
  padding-left: 10px!important;
}
</style>